<template>

  <a-button @click="loadData">取数据</a-button>
  <div style="display: flex">
    <div id="container" style="flex: 1"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { Graph, Edge, Shape, Cell } from '@antv/x6'

export default defineComponent({
    setup () {
        let graph: Graph;
        let curCel: Cell | null;
        onMounted(() => {
            console.log('ddddd')
            graph = new Graph({
                container: document.getElementById('container') as HTMLElement,
                width: 800,
                height: 600,
                background: {
                color: '#fffbe6', // 设置画布背景颜色
                },
                grid: {
                size: 10,      // 网格大小 10px
                visible: true, // 渲染网格背景
                },
            });
            const edge2: Edge = new Shape.Edge({
                source: { x: 40, y: 160 },
                target: { x: 380, y: 160 },
                vertices: [
                    { x: 40, y: 200 },
                    { x: 200, y: 200 },
                    { x: 200, y: 160 },
                ],
                connector: 'smooth',
                attrs: {
                    line: {
                    stroke: '#3c4260',
                    strokeWidth: 2,
                    targetMarker: 'classic',
                    },
                },
            })

            const edge1 = graph.addEdge({
                source: { x: 50, y: 40 },
                target: { x: 380, y: 40 },
                vertices: [
                    { x: 40, y: 85 },
                    { x: 200, y: 80 },
                    { x: 200, y: 40 },
                ],
                attrs: {
                    line: {
                        stroke: 'red',
                        strokeWidth: 6,
                        targetMarker: '',
                        strokeDasharray: "5,5"

                        // sourceMarker: {
                        //     tagName: 'ellipse',
                        //     rx: 20,
                        //     ry: 10,
                        //     cx: 20,
                        //     fill: 'rgba(255,0,0,0.3)',
                        // }
                    },
                },
                tools: [{
                    name: 'vertices',
                    args: {
                    strokeWidth: 15,
                    attrs: { fill: 'red', stroke: 'none', strokeWidth: 0, opacity:0.2, r: 5},
                    },
                },
                {
                    name: 'button-remove',
                    args: { distance: 20  },
                },{
                    name: 'boundary',
                    args: {
                    padding: 5,
                    attrs: {
                        fill: '#7c68fc',
                        stroke: '#333',
                        'stroke-width': 0.5,
                        'fill-opacity': 0.2,
                    },
                    },
                },
                {
                    name: 'source-arrowhead',
                    args: { distance: 20  },
                },
                {
                    name: 'target-arrowhead',
                    args: { distance: 20  },
                    d: 'M 10 -8 -10 0 10 8 Z',
                    fill: '#333',
                    stroke: '#fff',
                    'stroke-width': 2,
                    cursor: 'move',
                }
                ],
            })
            // edge1.attr('line/fill', {
            //     type: 'linearGradient',
            //     stops: [
            //     { offset: '0%',  color: '#E67E22' },
            //     { offset: '20%', color: '#D35400' },
            //     { offset: '40%', color: '#E74C3C' },
            //     { offset: '60%', color: '#C0392B' },
            //     { offset: '80%', color: '#F39C12' },
            //     ],
            // })
            graph.addEdge(edge2)
            // graph.on('edge:mouseenter', ({ cell }) => {
            //     //if (cell === edge2) {
            //         cell.addTools('vertices', 'onhover')
            //         cell.addTools(['source-arrowhead','target-arrowhead'])
            //     //}
            // })
            graph.on('edge:contextmenu', ({ cell }) => {
                //if (cell === edge2) {
                    cell.addTools('vertices', 'onhover')
                    cell.addTools(['source-arrowhead','target-arrowhead','button-remove'])
                //}
            })

            

            graph.on('edge:mouseleave', ({ cell }) => {
                //if (cell.hasTools('onhover')) {
                    cell.removeTools()
                //}
            })
            graph.on('cell:click', ({cell}) => {
                curCel = cell
            })
        })

    
        const loadData = () => {
            console.log('loadData==',graph.toJSON())
        }
        return {
            loadData
        }
    }
})
</script>

<style scoped lang="less">

</style>